<template>
	<view @click="type=0">
		<view class="position-relative">
			<view class="flex text-grey-3 fs-16 h-50 flex-y-center">
				<view class="grow-1" @click.stop="open(1)">
					<view class="flex flex-center">
						<text class="mr-4">{{list[firstIndex]?.label}}</text>
						<uv-icon name="arrow-down-fill" size="14" color="#C9CDD4"></uv-icon>
					</view>
				</view>
				<view class="grow-1" v-if="list[firstIndex]?.children" @click.stop="open(2)">
					<view class="flex flex-center">
						<text class="mr-4">{{list[firstIndex]?.children[secondIndex]?.label}}</text>
						<uv-icon name="arrow-down-fill" size="14" color="#C9CDD4"></uv-icon>
					</view>
				</view>
			</view>
			<view class="box" :style="'height: calc(100vh - 100rpx - ' + height + 'px);z-index:999;'" v-if="type!=0"
				@touchmove.stop="">
				<view class="bg-white p-16 flex flex-x-space-between fs-16" v-for="(item,index) in tempList"
					:key='index' @click.stop="changeIndex(index)">
					<text>{{item.label}}</text>
					<uv-icon name='checkmark' color="#165DFF"
						v-if="(type==1&&firstIndex==index)||(type==2&&secondIndex==index)"></uv-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, defineProps, watch } from 'vue'
	// #ifndef H5
	const height = uni.getMenuButtonBoundingClientRect().bottom
	// #endif
	// #ifdef H5
	const height = 0
	// #endif
	const emit = defineEmits(['click'])
	const tempList = ref([])
	const type = ref(0)
	const props = defineProps({
		list: {
			default: [],
			type: Array
		}
	})

	watch(() => props.list, (val) => {
		list.value = val
	})
	const list = ref(props.list)
	const firstIndex = ref(0)
	const secondIndex = ref(0)

	const open = (e) => {
		type.value = e
		if (e == 1) {
			tempList.value = list.value
		}
		if (e == 2) {
			tempList.value = list.value[firstIndex.value]['children']
		}
	}

	const changeIndex = (e) => {
		if (type.value == 1) {
			firstIndex.value = e
			if (!list.value[firstIndex.value]['children']) {
				emit('changeId', tempList.value[firstIndex.value]['value'])
			} else {
				emit('changeId', list.value[firstIndex.value]['children'][0]['value'])
			}
		}
		if (type.value == 2) {
			secondIndex.value = e
			emit('changeId', tempList.value[secondIndex.value]['value'])
			type.value = 0
		}
	}
</script>

<style scoped>
	.box {
		width: 100vw;
		position: absolute;
		top: 90rpx;
		background-color: rgba(0, 0, 0, 0.3);
	}
</style>